﻿var canvas = document.getElementById("cvscratch");
var ctx = canvas.getContext("2d");

var Pencil = function (options) {
    this.options = {
        strokeColor: "rgb(255,255,255)",
        fillStyle: "#666",
        prizeText: "一等奖",
        lineWidth: 3
    };
    this.init = function (canvas, ctx) {
        this.canvas = canvas;
        this.canvasPos = $(this.canvas).offset();
        this.ctx = ctx;

        var image = new Image();
        image.src = "../assets/images/scratcharea.png";
        image.onload = function () {
            ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
        };
        

        //this.ctx.fillStyle = this.options.fillStyle;
        //this.ctx.fillRect(0, 0, canvas.width, canvas.height);

        //console.log(this.options.stroke_color);
        this.ctx.strokeStyle = this.options.stroke_color;
        this.ctx.lineWidth = this.options.lineWidth;
        this.ctx.lineCap = "round";
        //this.ctx.globalCompositeOperation = "destination-out";
        this.drawing = false;
        this.addCanvasEvents();
    };
    this.addCanvasEvents = function () {
        //passing args using addEventListener is a little complex
        //use on() in jquery
        var c = $(this.canvas);
        c.on("mousedown", this, this.start);
        c.on("mousemove", this, this.stroke);
        c.on("mouseup", this, this.stop);
        this.bindMobile(c);
    };
    this.start = function (event) {

        var pen = event.data;
        var x = event.pageX - pen.canvasPos.left;
        var y = event.pageY - pen.canvasPos.top;
        pen.ctx.beginPath();
        pen.ctx.moveTo(x, y);
        pen.drawing = true;
    };
    this.stroke = function (event) {
        var pen = event.data
        if (pen.drawing) {

            var x = event.pageX - pen.canvasPos.left;
            var y = event.pageY - pen.canvasPos.top;

            //pen.ctx.lineTo(x, y);
            //pen.ctx.stroke();
            pen.ctx.clearRect(x, y, 10, 10);
        }
    };

    this.stop = function (event) {
        var pen = event.data;
        pen.drawing = false;

        //decide if we have done this card
        var imageData;
        var lineNum = 0,
          lineHei = 10,
          den = 10,
          pixel,
          drawnCounter = 0,
          sumCounter = 0;
        imageData = pen.ctx.getImageData(0, 0, pen.canvas.width, pen.canvas.height);
        for (h = 0; h < pen.canvas.height ; h += lineHei) {
            // console.log(startX);
            for (w = 0; w < pen.canvas.width ; w += den) {
                sumCounter++;
                pixel = imageData.data[((w + (h * pen.canvas.width)) * 4) - 1];
                //pixel is not transparent
                if (pixel != 0 && pixel) {
                    drawnCounter++;
                }
            }
        }
        console.log((sumCounter - drawnCounter) / sumCounter);
    };

    this.clear = function (canvas, ctx) {
        canvas.width = canvas.width;
        ctx.save();
        ctx.fillStyle = "#666";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.restore();
        //console.log(this);
        this.init(canvas, ctx);
    };

    this.bindMobile = function (obj) {
        obj.bind("touchstart touchmove touchend touchcancel", function () {
            var e = event.changedTouches, t = e[0], n = "";
            switch (event.type) {
                case "touchstart":
                    n = "mousedown";
                    break;
                case "touchmove":
                    n = "mousemove";
                    break;
                case "touchend":
                    n = "mouseup";
                    break;
                default:
                    return
            }
            var r = document.createEvent("MouseEvent");
            r.initMouseEvent(n, true, true, window, 1, t.screenX, t.screenY, t.clientX, t.clientY, false, false, false, false, 0, null);
            t.target.dispatchEvent(r);
            event.preventDefault()
        })
    };

    this.createBG = function (type) {
        var c = $("<canvas></canvas>").get(0);
        c.width = 500;
        c.height = 200;
        var ctx = c.getContext("2d");
        ctx.fillStyle = '#f00';
        ctx.font = ' bold 50px 微软雅黑';
        ctx.textBaseline = 'middle';
        ctx.fillText(this.options.prizeText, c.width / 2, c.height / 2);

        // 图片导出为 png 格式
        var imgType = 'png';
        var imgData = c.toDataURL(imgType);
        console.log(imgData);
        return imgData;
    }
};

var p = new Pencil();
p.init(canvas, ctx);

var storage = window.localStorage;
if (!storage.ValidTimes)
    storage.ValidTimes = 0;

//获取奖品
$.getJSON("../controller/scrath.ashx", { "action": "getpriceurl","validtimes":storage.ValidTimes }, function (result) {
    $("#cvscratch").css({
        "background-image": "url(" + result.url + ")"
    });

    //有效次数加一，并记录时间。
    storage.ValidTimes++;
    storage.LuckyTime = new Date();
});




//p.createBG();
$("#clearCanvas").click(function () {
    p.clear(canvas, ctx);
});
